<template>
  <div class="around-container">
    <div class="goods-top clearfix">
      <h3 class="top-title">{{ topTitle }}</h3>
      <ul class="top-sub">
        <li v-for="(sub) in subs" :key="sub.id" :class="{ active: topSubStatus === sub.id }"
          @mouseenter="topSubEnter(sub.id)"> {{ sub.name }}
        </li>
      </ul>
    </div>
    <div class="goods-content clearfix">
      <goods :curr-goods="currGoods"></goods>
    </div>
  </div>
</template>
<script>
import Item_goods from '@/components/front/Item_goods.vue'
import { getAllItemCategoryData } from '@/api/itemCategory.js'
import { getItemPageByCategoryId } from '@/api/item.js'
import bus from '@/utils/Bus'
export default {
  data() {
    return {
      topTitle: '商品分类',
      subs: [],
      topSubStatus: 1,
      clas: [
        [
          {
            sourceUrl: '',
            image: 'https://upyun.dinghuale.com/uploads/20230216/202302161326363666.jpg',
            name: '碎冰蓝玫瑰',
            price: '￥419',
            description: '送给你的希望是星辰和大海',
            stock: '库存 1000'
          },
        ],
      ],  //每个分类内的加载的商品信息
      currentsPage:[],  //存储每一个分类加载到几页
      currGoods: [],  //当前显示的商品
    }
  },
  methods: {
    topSubEnter(id) {
      //鼠标进入某个分类时的操作
      this.topSubStatus = id
      //判断该类是否还未获取过商品
      if(this.currentsPage[id]===undefined){
        this.currentsPage[id]=1
        this.getGoods(id,this.currentsPage[id]).then((response)=>{
          this.currGoods=this.clas[id]
        })
      }
      else{
        this.currGoods = this.clas[id]
      }
      
    },
    getAllCal() {
      getAllItemCategoryData().then((response) => {
        this.subs = response.data.data.records
      })
    },
    getGoods(claId,current=1) {
      const params = {
        categoryId: claId,
        current:current,
        size:10
      }
      return getItemPageByCategoryId(params).then((response) => {
        this.clas[claId]=response.data.data.records
      })
    },
    viewMoreGoods(){
      this.currentsPage[this.topSubStatus]+=1
      
      const params = {
        categoryId: this.topSubStatus,
        current:this.currentsPage[this.topSubStatus],
        size:10
      }
      console.log(params)
      return getItemPageByCategoryId(params).then((response) => {
        this.clas[this.topSubStatus]=this.clas[this.topSubStatus].concat(response.data.data.records)
        this.currGoods=this.clas[this.topSubStatus]
      })
    }
  },
  components: {
    'goods': Item_goods
  },
  mounted: function () {
    this.getAllCal()
    this.topSubEnter(1)
    bus.on("viewMore",(e)=>{
      this.viewMoreGoods()
    })
  }
}
</script>
  
<style scoped>
.around-container {
  background: #e6f6f9;
  width: 100%;
  height: 1030px;
  margin-left: auto;
  margin: auto;
}

.goods-content {
  width: 1226px;
  height: 975px;
  margin: 0 auto;
}

.goods-top {
  width: 1226px;
  height: 58px;
  margin: 0 auto;
}

.goods-top .top-title {
  float: left;
  position: absolute;
  margin: 0;
  font-size: 22px;
  font-weight: 200;
  line-height: 58px;
  color: #333;
  margin-top: 13px;
}

.goods-top .top-sub {
  float: right;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  font-size: 16px;
  margin-top: 36px;
  color: #424242;
  list-style: none;
}

.goods-top .top-sub li {
  width: auto;
  height: 24px;
  line-height: 24px;
  cursor: pointer;
  padding: 0 10px;
}

.goods-top .top-sub li:hover {
  color: #ff6700;
  border-bottom: 2px solid #ff6700;
}
</style>
  